<template>
    <div style="width:100%;height:100%;" id="service_request_con"></div>
</template>

<script>
import echarts from 'echarts';

import util from '@/libs/util';
import Cookies from 'js-cookie';
import getDate from '@/util/getDate.js';

export default {
    name: 'serviceRequests',
    data () {
        return {
            baseuser: JSON.parse(Cookies.get('baseUser'))
        };
    },
    mounted () {
        util.ajax.post('/busine/bill/findSeven', util.toFormData({
            orgid: (this.baseuser.type === 2 ? this.baseuser.orgId : '')
        })).then(res => {
            let billList = res.data.data;
            let xAxisData = [];
            let seriesData = [];
            billList.forEach((item) => {
                let date = getDate.getDate(item.createtime, 'date');
                if (xAxisData.indexOf(date) === -1) {
                    xAxisData.push(getDate.getDate(item.createtime, 'date'));
                    seriesData.push(10);
                } else {
                    seriesData[seriesData.length - 1]++;
                }
            })
            const option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                grid: {
                    top: '3%',
                    left: '2%',
                    right: '3%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: xAxisData
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '',
                        type: 'line',
                        stack: '总量',
                        label: {
                            normal: {
                                show: true,
                                position: 'top'
                            }
                        },
                        areaStyle: {normal: {
                            color: '#B0E2FF'
                        }},
                        data: seriesData
                    }
                ]
            };
            const serviceRequestCharts = echarts.init(document.getElementById('service_request_con'));
            serviceRequestCharts.setOption(option);

            window.addEventListener('resize', function () {
                serviceRequestCharts.resize();
            });
        })
    }
};
</script>